<!doctype html>
<html lang="zh-hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<link rel="Shortcut Icon" type="image/ico" href= "" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">

    <title>webDemo--单身二十年前端案例总结</title>
</head>
<body>
    
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button class="navbar-toggle" data-toggle="collapse" data-target="#responsive-navbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="index.html" class="navbar-brand"><strong>webDemo</strong></a>
            </div>
            <div class="collapse navbar-collapse" id="responsive-navbar">
            <ul class="nav navbar-nav">
                <li><a href="index.html">web案例</a></li>
                <li  class="active"><a href="article.html">博客</a></li>
                
            </ul>
            <form action="" class="navbar-form navbar-left">
                <input type="text" placeholder="搜索" class="form-control">
                <button type="submit">
                    <span class="glyphicon glyphicon-search"></span>
                </button>
            </form>
            <a href="" class="btn btn-primary btn-sm navbar-btn navbar-right hidden-xs"data-toggle="modal" data-target="#login-modal">订阅案例</a>
            <div class="profile navbar-right">
                <ul class="nav navbar-nav">
                    <li><a href="" data-toggle="modal" data-target="#login-modal">登录</a></li>
                    <li><a href="">注册</a></li>
                </ul>
            </div>
        </div>
        </div>
    </nav>
             <div id="ad-carousel" class="carousel slide" data-ride="carousel"style="margin-bottom:30px;">
		        <div class="carousel-inner">
				     <div class="item active">
							 <div class="article-banner">
								  <div class="article-bg">
									  
								  </div>
							 </div> 
					    <div class="carousel-caption">
							<h2><strong style="font-family:微软雅黑;">小元素提升网页体验</strong></h2>
							<p style="font-family:黑体">作者:单身汪</p>
                        </div>
				 </div>
                 </div>
			</div>
			<div class="container"style="max-width:1080px;">
			     
			     <p class="title-inf">从古代的象形文字（甲骨文）到现代的汉字，最显著的特征就是方便书写，复杂东西简单化。站在设计的角度来看汉字，汉字无疑是
				 中华民族最伟大的设计，把事物通过汉字的方式形象的表达出来，通俗易懂，至今已有四千多年历史.</p>
				 <p class="title-header"><h2 style="font-family:微软雅黑;"><strong>有感情的小元素:表情符(0_0)</strong></h2></p>
				 <p class="title-info">自苹果公司发布的ios5输入法中加入了emoji后，这种表情符号开始席卷全球，普遍应用于各种手机短信和社交网络中。</p>
				 <p class="title-info">苹果输入法不停的迭代emoji表情，在ios8.3中，加入了同性家庭、以及对不同肤色人种的职业展示：</p>
				 <div class="img-one">
				   <img src="images/biaoqing.png"/>
				 </div>
				 <p class="title-info">那么emoji表情对应的unicode码是什么呢？</p>
				 <div class="img-two">
				     <img src="images/unicode.png"/>
				 </div>
				 
			</div>
			<footer>
				<div class="container"style="padding:20px;background-color:#fff;width:100%;text-align:center;line-height:25px">
					<div class="row">
						<div class="col-md-12">
							<p>
								Copyright&nbsp;©&nbsp;2012-2015&nbsp;&nbsp;欢迎加QQ969804929;一起交流学习&nbsp;&nbsp;本网站不做商业用途
								   <br>在此也感谢慕课网 潭州学院提供技术支持
							</p>
						</div>
					</div>
                 </div>
	        </footer>
    <div class="modal fade" id="login-modal" tabindex="-1" data-remote="login-form.html">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal">&times;</button>
                    <h4>欢迎来到webDemo</h4>
                </div>
                <div class="modal-body">
                    <input type="text" placeholder="订阅最新web案例请留下邮箱" style="border:0px;color:#000;width:380px;height:50px;outline:none;"></intput>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary">订阅</button>
                </div>
            </div>

        </div>
    </div>
    <script src="lib/jquery-2.1.1.min.js"></script>
    <script src="lib/bootstrap/js/bootstrap.min.js"></script>
    <script src="lib/holder.js"></script>
    <script src="js/app.js"></script>
    <script>
    //$('#login-modal').modal('show');
        $(function() {
            $('#login-modal').modal({
                show: false,
                backdrop: false,
                remote: 'login-form.html'
            });
        });
/**/        $(function() {
            $('#login-modal').on('show.bs.modal', function() {
                console.log('显示对话框');
            });
            $('#login-modal').on('shown.bs.modal', function() {
                console.log('对话框已经显示了');
            });
            $('#login-modal').on('hide.bs.modal', function() {
                console.log('隐藏对话框');
            });
            $('#login-modal').on('hidden.bs.modal', function() {
                console.log('隐藏了对话框');
            });
            $('#login-modal').on('loaded.bs.modal', function() {
                console.log('已经加载好了对话框里面的内容');
            });
            $('#slideshow').on('slide.bs.carousel', function() {
                console.log('播放幻灯片');
            });
            $('#slideshow').on('slid.bs.carousel', function() {
                console.log('播放完成！');
            });            
        });
    </script>
</body>
</html>



















